<template>
	<div class="tree">
		<div class="tree1">
			<el-input placeholder="输入关键字进行过滤" v-model="filterText">
			</el-input>
			<el-tree  accordion class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
			  ref="tree2">
			</el-tree>
		</div>
		<div class="tree2">
			<el-tree
			  :data="data2"
			  show-checkbox
			  default-expand-all
			  node-key="id"
			  ref="tree"
			  highlight-current
			  :props="defaultProps">
			</el-tree>
		</div>
	</div>
</template>

<script>
	export default {
		watch: {
		  filterText(val) {
			this.$refs.tree2.filter(val);
		  }
		},

		methods: {
		  filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		  },
		  getCheckedNodes() {
			console.log(this.$refs.tree.getCheckedNodes());
		  },
		  getCheckedKeys() {
			console.log(this.$refs.tree.getCheckedKeys());
		  },
		  setCheckedNodes() {
			this.$refs.tree.setCheckedNodes([{
			  id: 5,
			  label: '二级 2-1'
			}, {
			  id: 9,
			  label: '三级 1-1-1'
			}]);
		  },
		  setCheckedKeys() {
			this.$refs.tree.setCheckedKeys([3]);
		  },
		  resetChecked() {
			this.$refs.tree.setCheckedKeys([]);
		  }
		  
		},

		data() {
		  return {
			filterText: '',
			data2: [{
			  id: 1,
			  label: '一级 1',
			  children: [{
				id: 4,
				label: '二级 1-1',
				children: [{
				  id: 9,
				  label: '三级 1-1-1'
				}, {
				  id: 10,
				  label: '三级 1-1-2'
				}]
			  }]
			}, {
			  id: 2,
			  label: '一级 2',
			  children: [{
				id: 5,
				label: '二级 2-1'
			  }, {
				id: 6,
				label: '二级 2-2'
			  }]
			}, {
			  id: 3,
			  label: '一级 3',
			  children: [{
				id: 7,
				label: '二级 3-1'
			  }, {
				id: 8,
				label: '二级 3-2'
			  }]
			}],
			defaultProps: {
			  children: 'children',
			  label: 'label'
			}
		  };
		}
	}
</script>

<style>
.tree1{
	margin-left: 100px;
	text-align: center;
	width: 30%;
	float: left;
}
.tree2{
	margin-top: 50px;
	margin-left: 200px;
	text-align: center;
	width: 30%;
	float: left;
}
</style>
